<div nz-row style="margin-left: -12px;margin-right: -12px;">
  <div nz-col [nzXl]="{ span: 4}" [nzMd]="{ span: 6}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <nz-input [nzType]="'search'" [nzPlaceHolder]="'答题人姓名'" [(ngModel)]="searchParams.values.username"
              class="ant_search"></nz-input>
  </div>

  <div nz-col [nzXl]="{ span: 8}" [nzMd]="{ span: 8}" [nzSm]="{ span: 14}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <div class="filterItem">
      <div class="labelWrap">
        <span>答题时间</span>
      </div>
      <div class="item">
        <div nz-col [nzSpan]="12">
          <nz-datepicker (ngModelChange)="searchParams.values.startDate=$event;_startValueChange()" [ngModel]="searchParams.values.startDate"
                         [nzShowTime]="true" [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                         [nzPlaceHolder]="'开始时间'"></nz-datepicker>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-datepicker (ngModelChange)="searchParams.values.endDate=$event;_endValueChange()" [ngModel]="searchParams.values.endDate"
                         [nzShowTime]="true" [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                         [nzPlaceHolder]="'结束时间'"></nz-datepicker>
        </div>
      </div>
    </div>
  </div>
  <div nz-col [nzXl]="{ span: 9}" [nzMd]="{ span: 24}" [nzSm]="{ span: 24}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
      <div>
        <button nz-button [nzType]="'primary'" (click)="getData()">
          <span>Search</span>
        </button>
        <button nz-button [nzType]="'default'" (click)="clearSearchParams()">
          <span>Reset</span>
        </button>
      </div>
    </div>
  </div>
</div>
<app-table [gridView]="gridView" [tableData]="tableData"
           [total]="total"
           [(pageIndex)]="current"
           [pageSize]="pageSize"
           [loading]="loading"
           (refreshData)="getData($event)"></app-table>


<nz-modal [nzVisible]="isVisible" [nzTitle]="'试卷详情'" [nzContent]="modalContent" [nzFooter]="false" (nzOnCancel)="handleCancel($event)">
  <ng-template #modalContent>
    <div *ngIf="details">
      <div>答题人员：{{details.username}}</div>
      <div>答题时间：{{details.testtime}}</div>
      <div>正确题数：{{details.rightAnswerNumber}}</div>
      <div>错误题数：{{details.wrongAnswerNumber}}</div>
      <ul>
        <li *ngFor="let item of details.answerlist;let i=index;">
          <div><label for="">题目</label>{{i+1}}.{{item.q_desc}}</div>
          <div><label for="">用户答案：</label>{{item.user_answer}}</div>
          <div><label for="">正确答案：</label>{{item.true_answer}}</div>
        </li>
      </ul>
    </div>
  </ng-template>
</nz-modal>
